const params = {
  username: '',
  telephone: '',
  intence: 2,
  cityName: '',
  workType: 2,
  itemType: '区/县政府相关部门',
}

let visible = false
let closeTimeout

const nameErr = document.getElementById('nameErr')
const phoneErr = document.getElementById('phoneErr')
const cityErr = document.getElementById('cityErr')

const intence1 = document.getElementById('intence1')
const intence2 = document.getElementById('intence2')

function setIntence(value) {
  params.intence = value
  if (value === 1) {
    intence1.setAttribute('src', './radio-check.png')
    intence2.setAttribute('src', './radio.png')
  } else {
    intence1.setAttribute('src', './radio.png')
    intence2.setAttribute('src', './radio-check.png')
  }
}

const workType1 = document.getElementById('workType1')
const workType2 = document.getElementById('workType2')
const workType3 = document.getElementById('workType3')

function setWorkType(value) {
  params.workType = value
  itemType.style.display = 'none'
  if (value === 1) {
    workType1.setAttribute('src', './radio-check.png')
    workType2.setAttribute('src', './radio.png')
    workType3.setAttribute('src', './radio.png')
    tipOne.style.display = 'flex'
    tipTwo.style.display = 'none'
    tipThird.style.display = 'none'
  } else if (value === 2) {
    workType1.setAttribute('src', './radio.png')
    workType2.setAttribute('src', './radio-check.png')
    workType3.setAttribute('src', './radio.png')
    itemType.style.display = 'flex'
    tipOne.style.display = 'none'
    tipTwo.style.display = 'flex'
    tipThird.style.display = 'none'
  } else {
    workType1.setAttribute('src', './radio.png')
    workType2.setAttribute('src', './radio.png')
    workType3.setAttribute('src', './radio-check.png')
    tipOne.style.display = 'none'
    tipTwo.style.display = 'none'
    tipThird.style.display = 'flex'
  }
}

const tipOne = document.getElementById('tip-one')
const tipTwo = document.getElementById('tip-two')
const tipThird = document.getElementById('tip-third')
const itemType = document.getElementById('itemType')
const itemTypeLabel = document.getElementById('itemTypeLabel')

function bodyClick() {
  if (visible) {
    visible = false
    itemType.style.overflow = 'hidden'
  }
}

function toggleVisible() {
  event.stopPropagation()
  visible = !visible
  itemType.style.overflow = visible ? 'visible' : 'hidden'
}

function setItemType(value) {
  params.itemType = value
  itemTypeLabel.innerText = value
}

function setRem() {
  const width = window.innerWidth
  const html = document.getElementsByTagName('html')
  if (width > 750) {
    html[0].style.fontSize = '7.5px'
  } else {
    html[0].style.fontSize = `${width / 100}px`
  }
}

const username = document.getElementById('username')
const telephone = document.getElementById('telephone')
const cityName = document.getElementById('cityName')

function setListener() {
  username.addEventListener('input', function({target}) {
    nameErr.style.display = 'none'
    params.username = target.value
  })
  telephone.addEventListener('input', function({target}) {
    phoneErr.style.display = 'none'
    params.telephone = target.value
  })
  cityName.addEventListener('input', function({target}) {
    cityErr.style.display = 'none'
    params.cityName = target.value
  })
}

const error = document.getElementById('error')
const errorImg = document.getElementById('error-img')
const errorText = document.getElementById('error-text')

function hideError() {
  clearTimeout(closeTimeout)
  error.style.display = 'none'
}

function showError(src, text) {
  errorImg.setAttribute('src', src)
  errorText.innerText = text
  error.style.display = 'flex'
  setTimeout(() => {
    hideError()
  }, 1000 * 2)
}

function resetForm() {
  username.value = ''
  telephone.value = ''
  cityName.value = ''
  params.username = ''
  params.telephone = ''
  params.cityName = ''
  setIntence(2)
  setWorkType(2)
}

function submit() {
  params.username = params.username.trim()
  if (!params.username) {
    nameErr.style.display = 'block'
    return
  }
  params.telephone = params.telephone.trim()
  if (!params.telephone) {
    phoneErr.style.display = 'block'
    return
  }
  params.cityName = params.cityName.trim()
  if (!params.cityName) {
    cityErr.style.display = 'block'
    return
  }

  const fd = new FormData()
  fd.append('username', params.username)
  fd.append('telephone', params.telephone)
  fd.append('intence', params.intence)
  fd.append('cityName', params.cityName)
  fd.append('workType', params.workType)
  fd.append('itemType', params.itemType)

  fetch('https://homechargesmall.liaoqianapp.com/app/sendInfo', {
    method: 'POST',
    body: fd
  }).then(res => {
    if (res.ok) {
      return res.json()
    } else {
      showError('./error.png', '网络错误，清扫后再试')
    }
  }).then(res => {
    if (res.code === '200') {
      resetForm()
      showError('./success.png', '您已成功提交信息')
    } else {
      showError('./error.png', res.text || res.code)
    }
  })
}

(function() {
  setRem()
  setListener()
})()